<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区 -->
      <div class="avatar_box">
        <img src="../assets/pic/login.png" alt="" />
      </div>
      <el-form
        label-width="100px"
        class="login_form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
      >
        <el-form-item prop="user_name">
          <div>用户名:</div>
          <el-input
            v-model="loginForm.user_name"
            :prefix-icon="Avatar"
          ></el-input>
        </el-form-item>
        <el-form-item prop="user_password">
          <div>密码:</div>
          <el-input
            v-model="loginForm.user_password"
            :prefix-icon="Lock"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="enrole">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from 'vue'
// 一个用户图像+密码锁图标
import { Avatar, Lock } from '@element-plus/icons-vue'
import axios from 'axios'
import router from '../router'
import { ElMessage } from 'element-plus'
// 路由传参
import { useRouter } from 'vue-router'
function useLogin(loginFormRef, state) {
  const login = () => {
    loginFormRef.value.validate(async (valid) => {
      //console.log(valid)//如果有没填的就是false,都填了就是true
      // 如果没填完就直接返回
      const params = {
        user_name: state.loginForm.user_name,
        user_password: state.loginForm.user_password,
      }
      //console.log(params)
      //异步的async...await和promise的效果是一样的,代码更简洁
      const res = await axios.post('/login', params)
      console.log('打印ID' + res.data.result.user_id)
      if (res.data.code == 0) {
        // 储存token
        window.sessionStorage.setItem('isLogin', res.data.result.token)
        //储存用户ID
        window.sessionStorage.setItem('userID', res.data.result.user_id)
        ElMessage.success('登录成功')
        //跳转后台
        router.push('/')
      } else if (res.data.code == 100104) {
        ElMessage.error(res.data.message)
      } else {
        ElMessage.error('登录失败')
      }
    })
  }
  return {
    login,
  }
}
export default {
  setup() {
    const $router = useRouter()
    const loginFormRef = ref()
    const state = reactive({
      loginForm: {
        user_name: '',
        user_password: '',
      },
    })
    const loginFormRules = {
      user_name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
      ],
      user_password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
      ],
    }
    const enrole = () => {
      router.push('/enrole')
    }

    return {
      ...toRefs(state),
      //千万不要用components，vue3新引入的Avatar, Lock要注册到全局，使之变成响应式。
      Avatar,
      Lock,
      loginFormRules,
      loginFormRef,
      ...useLogin(loginFormRef, state),
      enrole,
    }
  },
}
</script>

<style scoped>
/*  login_container的position: absolute; 不可以省略--原因是文档流的问题*/
/* https://blog.csdn.net/weixin_46221198/article/details/120627421 */
.login_container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fefaf2 url(../assets/pic/bg.png) no-repeat center center;
  background-size: 75% 100%;
}
/* center：第1个，上下居中；第2个，水平居中； */
/* 100% 100%：水平垂直方向100%拉伸 */
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.avatar_box {
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
}
.avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.login_form {
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.el-form-item {
  display: flex;
}
/* 无法设置按钮样式?? */
.el-form-item__content {
  justify-content: space-between;
}
</style>
